<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chinese mobile supermarket</title>
    <script src="./vuejs/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-parent> </my-parent>
    </div>
    <template id="parent">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌：<input type="text" v-model="brand">
            <my-child v-bind:name="brand"></my-child>
        </div>
    </template>
    <template id="child">
        
        <ul>
            <li>手机品牌:{{show.brand}}</li>
            <li>手机型号：{{show.type}}</li>
            <li>市场价格：{{show.price}}</li>
        </ul>
    </template>
    <script>
        Vue.component('my-parent', {
            template: '#parent',
            data() {
                return {
                    brand: ''
                }
            }
        })
        Vue.component('my-child', {
            template: '#child',
            data() {
                return {
                    content: [
                        {brand: '华为', type: 'mate20', price: 3699 },
                        {brand: '苹果', type: 'iphone7', price: 3299 },
                        {brand: 'vivo', type: 'z5x', price: 1698 },
                        {brand: '一加', type: 'oneplus7', price: 2999 },
                        {brand: '360', type: 'n7 pro', price: 1099 },
                        {brand: 'oppo', type: 'reno', price: 2599 }
                ],
                    show: { brand: '', type: '', price: '' }
                }
            },
            props: ['name'],
            watch: {
                name() {
                    if (this.$props.name) {
                        var found = false
                        this.content.forEach((value, index) => {
                            if (value.brand === this.$props.name) {
                                found = value
                            }
                        })
                        this.show = found ? found : { brand: '', type: '', price: '' }
                    } else {
                        return
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app' 
        })
    </script>
</body>

</html>